<!-- 菜单悬浮的原理: 通过给菜单添加position:sticky实现, 用法超简单, 仅APP端的低端机不兼容 https://caniuse.com/#feat=css-sticky -->
<template>
	<view>
		<view class="margin-sm padding-sm bg" v-for="(item,index) in goods" @click="clickItem(item)">
			<view class="flex justify-between u-border-bottom padding-bottom-sm">
				<view class="text-blue">审核通过</view>
				<!-- <view class="text-white">2021/02/21 13:44</view> -->
			</view>
			<view class=" u-flex u-p-t-30">
				<u-image :src="item.user.avr" width="100upx" height="100upx" mode=""></u-image>
				<!-- <view class="u-m-r-10">
						<u-avatar :src="avatar" mode="square" size="100"></u-avatar>
					</view> -->
				<view class="u-flex-1 text-white margin-left-xs">
					<view class="u-font-16  text-bold flex justify-between">
						<view>{{item.user.nick}}</view>
						<view>{{item.money}}元/小时</view>
					</view>
					<view class="u-font-14 u-tips-color margin-top">
						<view class="text-white">商品描述：{{item.description}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <empty v-if="goods.length === 0" des="暂无数据" show="true"></empty> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: [], // 数据列表
				page: 1,
				limit: 10,
				userId: 0,
				status: 1,
				nickName: '',
				avatar: '',
				customStyle: {
					color: '#1789FD',
					backgroundColor: '#1E1F31',
					border: "4px",
					width: '180upx',
					height: '54upx',
					margin: "0 0 0 20upx"
				},
				customStyle1: {
					backgroundColor: "#1789FD",
					border: 0,
					color: "#FFF",
					height: '98upx'
				}
			}
		},
		onLoad(e) {
			// this.userId = uni.getStorageSync('userId')
			// this.nickName = uni.getStorageSync('nickName')
			this.userId = e.id;
			console.log("userId为" + this.userId);
			// this.$myRequest({
			// 	url:"/goods/getGoodsListByUserId?status=y&userId="+this.userId,
			// 	success: (r) => {
			// 		console.log(r.data.data);
			// 		this.goods = r.data.data;
			// 	}
			// })
			this.$myRequest({
				url: "/goods/getGoodsListByUserId?status=y&userId=" + this.userId,
			}).then(r => {
				console.log(r)
				if (r.data.code == 200) {
					this.goods = r.data.data;
				}
			})
		},
		onShow() {
			// this.mescroll.resetUpScroll()
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				console.log("下拉刷新")
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let curTab = this.tabs[this.tabIndex].status

				let data = {
					userId: this.userId,
					status: curTab,
					page: page.num,
					limit: page.size
				}
			},
			//删除
			delDemand(e, msg) {
				console.log(e)
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定' + msg + '吗?',
					success: function(res) {
						if (res.confirm) {
							this.$myRequest({
								url: "/goods/delete?id=" + e.id,
								method: "get"
							}).then(r => {
								uni.showToast({
									title: "已" + msg
								})
								that.goods = []; // 置空列表,显示加载进度条
								that.mescroll.resetUpScroll();
								that.getList(that.tabIndex)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 完善需求
			edit(item) {
				uni.navigateTo({
					url: '/pages/order/release?type=hasEdit&id=' + item.id + '&content=' + item.content +
						'&site=' + item.site +
						'&phone=' + item.phone + '&deliveryTime=' + item.deliveryTime + '&classifyId=' + item
						.classifyId +
						'&classifyName=' + item.classifyName + '&userType=' + item.userType + '&commission=' + item
						.commission + '&image=' + item.image + '&address=' + item.address + '&latitude=' + item
						.latitude + '&longitude=' + item.longitude
				})
			},
			clickItem: function(options) {
				console.log('点击', options)
				//let isShow = this.tabs[this.tabIndex].status == 4 ? '1' : '0'
				uni.navigateTo({
					url: '/pages/index/game/order?id=' + options.id
				})
			},
			goNav(e) {
				uni.navigateTo({
					url: e
				})
			}
		}
	}
</script>

<style lang="scss">
	/*
	sticky生效条件：
	1、父元素不能overflow:hidden或者overflow:auto属性。(mescroll-body设置:sticky="true"即可, mescroll-uni本身没有设置overflow)
	2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
	3、父元素的高度不能低于sticky元素的高度
	4、sticky元素仅在其父元素内生效,所以父元素必须是 mescroll
	*/
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
		// background-color: #fff;
	}

	// 使用mescroll-uni,则top为0
	.mescroll-uni,
	/deep/.mescroll-uni {
		.sticky-tabs {
			top: 0;
		}
	}

	.demo-tip {
		padding: 18upx;
		font-size: 24upx;
		text-align: center;
	}
</style>
